
<template>
  <div class="h5-portal">
    <div class="portal-textarea-container">
      <textarea
        class="portal-textarea"
        rows="5"
        v-model="url"
        placeholder="请输入目标传送地址"
      ></textarea>
      <div class="portal-opt-area">
        <div class="opt-btn" @click="jumpToTarget">跳转</div>
      </div>
    </div>
    <div class="url-edit-container">
      <div class="url-edit-container-title">快捷编辑</div>
      <DoRow>
        <DoCol :span=6 class="url-edit-key">baseUrl</DoCol>
        <DoCol :span=18>
          <textarea
            rows="3"
            v-model="editUrlInfo.baseUrl"
            placeholder="eg. https://dokit.didi.cn"
          ></textarea>
        </DoCol>
      </DoRow>
      <DoRow class="url-edit-container-query-item" v-for="(query, index) in editUrlInfo.queryList" :key="index">
        <DoCol :span=6 class="url-edit-key">query参数{{index+1}}</DoCol>
        <DoCol :span=7>
          <input type="text" v-model="editUrlInfo.queryList[index].key"/>
        </DoCol>
        <DoCol :span=2 style="text-align:center;">=</DoCol>
        <DoCol :span=7>
          <input type="text" v-model="editUrlInfo.queryList[index].value"/>
        </DoCol>
        <DoCol class="url-edit-container-query-item__icon" :span="2" @click="delQuery(index)">
          <img src="" alt="" srcset="">
        </DoCol>
      </DoRow>
      <DoRow>
        <DoCol :span=16 :offset=6>
          <div class="add-btn" @click="addQuery">新增query参数</div>
        </DoCol>
      </DoRow>
      <DoRow>
        <DoCol :span=16 :offset=6>
          <div class="add-btn" @click="handleQuickEdit">跳转</div>
        </DoCol>
      </DoRow>
    </div>
    <div class="history-record-container">
      <div class="history-record-title">历史记录</div>
      <div class="history-record-list">
        <div class="history-record-list-item" v-for="(url, index) in historyList" :key="index">
          <DoRow>
            <DoCol class="history-record-list-item__url" :span="18">{{url}}</DoCol>
            <DoCol class="history-record-list-item__icon" :span="3" @click="jumpToUrl(url)">
              <img src="" alt="" srcset="">
            </DoCol>
            <DoCol class="history-record-list-item__icon" :span="3" @click="delHistory(index)">
              <img src="" alt="" srcset="">
            </DoCol>
          </DoRow>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
let URL_REG = new RegExp(`(https?(://))?[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]`)

export default {
  data() {
    return {
      url: '',
      historyList: [],
      editUrlInfo: {
        baseUrl: '',
        queryList: [{
          key: '',
          value: ''
        }]
      }
    };
  },
  created() {
    this.historyList = JSON.parse(localStorage.getItem("dokit-history-list") || "[]")
  },
  methods: {
    jumpToTarget() {
      if (!URL_REG.test(this.url)) {
        window.alert('输入的地址不符合URL规则')
        return
      }

      let targetUrl = this.url.startsWith('http') ? this.url : `${location.protocol}//${this.url}`
      if (this.historyList.indexOf(targetUrl) === -1) {
        this.addHistory(targetUrl)
      }

      window.location.href = targetUrl
      this.url = ''
    },
    addQuery() {
      this.editUrlInfo.queryList.push({
        key: '',
        value: ''
      })
    },
    delQuery(index) {
      this.editUrlInfo.queryList.splice(index, 1)
    },
    handleQuickEdit() {
      let targetUrl = this.editUrlInfo.baseUrl.startsWith('http') ?this.editUrlInfo.baseUrl : `${location.protocol}//${this.editUrlInfo.baseUrl}`
      targetUrl = targetUrl.indexOf('?')>-1 ? targetUrl : targetUrl+ '?'
      this.editUrlInfo.queryList.forEach((query, index) => {
        if(query) {
          if (index === 0 && targetUrl.endsWith('?')) {
            targetUrl += `${query.key}=${query.value}`
          } else {
            targetUrl += `&${query.key}=${query.value}`
          }
        }
      });
      if (this.historyList.indexOf(targetUrl) === -1) {
        this.addHistory(targetUrl)
      }

      window.location.href = targetUrl
    },
    jumpToUrl(url) {
      window.location.href = url
    },
    addHistory(url) {
      this.historyList.push(url)
      this.updateStorage()
    },
    delHistory(index) {
      this.historyList.splice(index, 1)
      this.updateStorage()
    },
    clearHistory() {
      this.historyList = []
      this.updateStorage()
    },
    updateStorage() {
      localStorage.setItem("dokit-history-list", window.JSON.stringify(this.historyList))
    }
  },
};
</script>

<style lang="less" scoped>
.h5-portal {
  padding: 5px;
  textarea,input {
    font-size: 13px;
  }
  .portal-textarea-container{
    .portal-textarea{
      font-size: 13px;
      border-radius: 5px;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #d6e4ef;
      resize: vertical;
    }
    .portal-opt-area{
      margin-top: 5px;
      height: 32px;
      line-height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .opt-btn{
        background-color: #337CC4;
        border-radius: 5px;
        font-size: 16px;
        width: 100%;
        text-align: center;
        color: #fff;
      }
    }
  }
  .url-edit-container{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #d6e4ef;
    .url-edit-key{
      font-size: 15px;
    }
    .url-edit-container-title{
      text-align: center;
      font-size: 18px;
      color:#2c405a;
      margin-bottom: 20px;
    }
    .url-edit-container-query-item{
      margin-top: 5px;
      height: 32px;
      line-height: 32px;
    }
    .url-edit-container-query-item__icon{
      height: 32px;
      line-height: 32px;
      text-align: center;
      img{
        width: 15px;
        height: 15px;
      }
      
    }
    .add-btn{
      margin-top: 5px;
      height: 32px;
      line-height: 32px;
      background-color: #337CC4;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
      color: #fff;
    }
    textarea{
      border-radius: 5px;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #d6e4ef;
      resize: vertical;
    }
    input{
      height: 32px;
      line-height: 32px;
      border-radius: 5px;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #d6e4ef;
    }
  }
  .history-record-container{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #d6e4ef;
    .history-record-title{
      text-align: center;
      font-size: 18px;
      color:#2c405a;
      margin-bottom: 20px;
    }
    .history-record-list-item{
      margin-top: 5px;
      background-color: #337CC4;
      border-radius: 5px;
      height: 32px;
      line-height: 32px;
      color: #fff;
      padding: 0 5px;
      .history-record-list-item__url{
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .history-record-list-item__icon{
        img{
          width: 15px;
          height: 15px;
        }
        text-align: center;
      }
      
    }
  }
}
</style>